import styled from "@emotion/styled"
import { Card, Divider, Button } from "antd"
import ValidcodeLogin from "./validcode-login"
import PasswordLogin from "./password-login"
import { useState } from "react"
import logo from "../../assets/img/logo.png"
import useLoginModel from "../../model/useLoginModel"
import { Redirect } from "react-router-dom"
import { pathName } from "../../routes/path"
import { useMount } from "ahooks"

const Login = () => {

    const [isPasswordLogin, setIsPasswordLogin] = useState(false);
    const user = useLoginModel()

    useMount(user.logout) //首次进入登录清空用户信息

    return <Container>
        <Header>
            <Logo src={logo} alt="logo" />
        </Header>
        <ShadowCard title="登录租赁系统">
            {isPasswordLogin ? <PasswordLogin /> : <ValidcodeLogin />}
            <Divider />
            <SwitchButton type="link" onClick={() => {setIsPasswordLogin(!isPasswordLogin)}}>
                {isPasswordLogin ? "切换到钉钉验证码登录" : "切换到账号密码登录"}
            </SwitchButton>
        </ShadowCard>
        {/* 判断是否已获取到token跳转到首页 */}
        {user.token ? <Redirect to={pathName.DASHBOARD} /> : null}
    </Container>
}

const Header = styled.header`
    width: 100%;
    text-align: center;
`

const Logo = styled.img`
    margin: 100px 0 50px 0;
    user-select: none;
`

const Container = styled.div`
    height: 100vh;
    width: 100vw;
    background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);
    background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);
    background-attachment: fixed;
    overflow: hidden;
`

const ShadowCard = styled(Card)`
    margin: 0 auto;
    width: 400px;
`

const SwitchButton = styled(Button)`
    width: 100%;
`

export default Login